<template>
  <div>
    <el-radio-group v-model="logType" size="mini" @change="loadLog()">
      <el-radio-button label="0">全部</el-radio-button>
      <el-radio-button label="1">未读</el-radio-button>
      <el-radio-button label="2">我发出的</el-radio-button>
      <el-radio-button label="3">抄送我的</el-radio-button>
    </el-radio-group>
    <ex-infinite-scroll ref="ins" class="log-reader" :url="url" :size="10">
      <template slot="content" slot-scope="{list}">
        <div class="infinite-list-item" v-for="item in list" @click="logDetail(item)">
          <div style="clear: both; padding: 5px 0;" :class="getReadStatus(item)!='已读'?'bold':''">
            <img :src="item.logOwnerAvatar+'_60x60q90.jpg'" class="avatar" style="float:left">
            <div style="float:left; line-height: 16px; font-size: 12px; padding-left: 10px; ">
                {{item.logOwnerName}} <br>
                {{item.logTimeStr}}
            </div>
            <div style="position: absolute; color:gray; right:10px; top:10px; font-size: 12px;">
              <span v-if="isMyTodayLog(item)" @click.stop="gotoEdit()"><i class="el-icon-edit"></i> 修改</span> &nbsp; {{getReadStatus(item)}}
            </div>
          </div>
          <div style="max-height:108px; overflow: hidden; clear: both; padding-top: 10px;" v-html="item.description.replace(' \n \n ', '<br/>')"></div>
        </div>
      </template>
    </ex-infinite-scroll>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import RichEditor from '@/components/ding/rich-editor'
  import ExInfiniteScroll from '@/components/common/ex-infinite-scroll'
  import {dateUtil} from '@/utils/dateUtil'

  export default {
    data () {
      return {
        logType:0,
        url:'/wpb/logmark/list',
        markId: 0
      }
    },
    components:{
      RichEditor,ExInfiniteScroll
    },
    mixins: [dingMixin],
    activated () {
      this.loadLog();
    },
    created(){
      this.loadMembers().then(data=>this.members = data);
    },
    methods: {
      gotoEdit(){
        this.$emit('gotoWrite');
      },
      isMyTodayLog(item){
        return item.logOwnerId == this.userInfo.dingId && item.logDate == (new Date()).Format("yyyy-MM-dd")
      },
      getReadStatus(item){
        if(item && item.unRead){
          let found = item.unRead.indexOf(this.userInfo.dingId);
          if(found>=0){
            return "未读";
          }else{
            return "已读";
          }
        }

      },
      logDetail(item){
        this.markId = item.id
        this.$router.push({name:'log-mark', query: {markId: this.markId, logFlag: this.logType} });
      },
      loadLog(){
        let params = {
          'logFlag': this.logType
        }
        this.$refs.ins.getData(params)
      },
      getReadCount(item){
        return item.ccUsers.length - item.unReadUsers.length;
      }
    }
  }
</script>
<style lang="scss" scoped>

  .log-reader{
    width:100%;
    padding: 10px;
    min-height: 500px;
    height: calc(100vh - 170px);
    overflow-y: auto;
  }

  .log-reader .infinite-list-item {
    position: relative;
    height: auto;
    margin-top: 10px;
    border-bottom: lightgray solid 1px;
    cursor:pointer;
    padding-bottom: 20px;
  }


  .avatar{
    width: 30px;
    height: 30px;
    margin-right: 0px;
    border-radius: 100%;
    vertical-align: middle;
  }

  .center{
    text-align: center;
  }

  .bold{
    font-weight: bold;
  }

</style>
